{include file="header" title="$title" /}
    <div class="page-title i-card-main">
        <i class="iconfont icon-page"></i>
        <span>USER LIST</span>
        <div class="add" data-toggle='modal' data-target='#usermodal'>
            <span><i class="iconfont icon-add"> 添加用户</i></span>
        </div>
    </div>
        <div class="i-card-main">
            <table class="table">
                <thead>
                <tr>
                    <th>UID</th>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>网站</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
            <nav id="page" style="display: none;">
                <ul class="pagination justify-content-center">
                </ul>
            </nav>
        </div>  
    {include file="footer" /}
</div>
<script>
$(".loading").show();
$(".i-card-main").eq(1).hide();

$('.add').click(function(){
    $('#userModal').modal('show');
    $('#userModal .modal-title').text('新增用户')
})
$('#userModal').on('hidden.bs.modal', function (e) {
    $('#userModal .modal-title').text('修改用户')
})

$(document).ready(function(){
    $.get("/api/v1/getUserList?page=" + page,function(res){
        if(res.code != 200 ){
            layer.msg(res.data.msg);
            return;
        }

        const data = res.data.data;
        let html = "";
        for (let i = 0; i < data.length; i++) {
        const { id, username, email, website, verify, state } = data[i];
        const verifiedBadge = verify ? "已验证" : "未验证";
        const stateBadge = state ? "显示" : "隐藏";

        html += `
            <tr>
            <th scope='row'>${id}</th>
            <td><a href='/home/${id}' target='_blank'>${username}</a></td>
            <td>${email}</td>
            <td>${website ? `<a href='${website}' target='_blank'><div class='icon' style='color:#0066ff87;'><i class='iconfont icon-lianjie'></i></div></a>` : ''}</td>
            <td><span class='badge badge-${verify ? 'info' : 'warning'}' id='${id}'>${verifiedBadge}</span>
                <span class='badge badge-${state ? 'success' : 'secondary'} state' id='${id}'>${stateBadge}</span>
                <span class='badge badge-primary' data-toggle='modal' data-target='#usermodal' id='${id}'>修改</span>
                <span class='badge badge-danger' id='${id}'>删除</span>
            </td>
            </tr>`;
        }

        pages(res)
        $("tbody").html(html);
        $(".loading").hide();
        $(".i-card-main").eq(1).show();


    });
});

$('#userModal').on('show.bs.modal', function (e) {
    if($(e.relatedTarget).hasClass('item')){
        $('#userModal .btn-primary').attr('id', 'update')
        return;
    }
    $('#userModal .btn-primary').attr('id', 'su_update')
    if($('#userModal .modal-title').text() == '新增用户'){
        $('#userModal input').val('')
        $('#userModal .name').text('')
        $('#userModal img').attr('src', defaultAvatar);
        $('#userModal input[name="username"]').attr('placeholder','请输入用户名')
        $('#userModal input[name="email"]').attr('placeholder','请输入用户邮箱')
        $('#userModal input[name="password"]').attr('placeholder','请输入用户密码')
    }
})

$("tbody").on("click","span",function(){
    const id = $(this).attr("id");
    const value = $(this)[0].classList[1]
    if($(this).hasClass("badge-primary")){
        $('#userModal').modal('show');
        $.post("/api/v1/getUserAllInfo",{"id":id},function(res){
            const data = res.data;
            if(res.code == 200){
                $('#userModal .name').text(res.data.username);
                if(res.data.avatar){
                    $('#userModal img').attr('src', res.data.avatar);
                }else {
                    $('#userModal img').attr('src', defaultAvatar);
                }
                $('#userModal input[name="username"]').val(res.data.nickname);
                $('#userModal input[name="email"]').val(res.data.email);
                $('#userModal input[name="website"]').val(res.data.website);
                $('#userModal input[name="content"]').val(res.data.content);
                $('#userModal input[name="scores"]').val(res.data.scores);
                $('#userModal span[name="id"]').text(res.data.id);
            }else{
                layer.msg(data.msg);
            }
        });
    }else if($(this).hasClass("badge-danger")){
        layer.alert('确定要删除此用户吗！？', {
		icon: 5,
		btn: ['确定', '取消'],
		yes: function(index) {
			layer.close(index);
            $.post("/api/v1/deleteUser",{"id":id},function(res){
                if(res.code == 200){
                    layer.msg(res.msg);
                    setTimeout(function(){
                        window.location.reload();
                    },1000);
                }else{
                    layer.msg(res.msg);
                }
            });
        }
    });}
    else if($(this).hasClass("state")){
        value.indexOf("success") >= 0 ? valueId = 'display' : valueId = 'hidden'
        $.post("/api/v1/editUserState",{"value":valueId, "id":id},function(res){
            if(res.code == 200){
                layer.msg(res.msg);
                setTimeout(function(){
                    window.location.reload();
                },500);
            }else{
                layer.msg(res.msg);
            }
        });
    }
    else{
        value.indexOf("info") >= 0 ? valueId = 'verify' : valueId = 'unverify'
        $.post("/api/v1/editUserState",{"value":valueId, "id":id},function(res){
            if(res.code == 200){
                layer.msg(res.msg);
                setTimeout(function(){
                    window.location.reload();
                },500);
            }else{
                layer.msg(res.msg);
            }
        });
    }
});

$('#userModal').on('click', '#su_update', function () {
    const avatar = $('#userModal .avatar img').attr('src');
    const id = $('#userModal span[name="id"]').text();
    const username = $('#userModal input[name="username"]').val();
    const email = $('#userModal input[name="email"]').val();
    const website = $('#userModal input[name="website"]').val();
    const content = $('#userModal input[name="content"]').val();
    const scores = $('#userModal input[name="scores"]').val();
    const password = $('#userModal input[name="password"]').val();
    if($('#userModal .modal-title').text() == '新增用户'){
        $.post("/api/v1/addUser",{"avatar":avatar,"username":username,"email":email,"website":website,"content":content},function(res){
            if(res.code == 200){
                layer.msg(res.msg);
                setTimeout(function(){
                    window.location.reload();
                },1000);
            }else{
                layer.msg(res.msg);
            }
        });
    }else {
        $.post("/api/v1/editUser",{"id":id,"avatar":avatar,"username":username,"email":email,"website":website,"content":content,"scores":scores,"password":password},function(res){
            if(res.code == 200){
                layer.msg(res.msg);
                setTimeout(function(){
                    window.location.reload();
                },1000);
            }else{
                layer.msg(res.msg);
            }
        });
    }
    return;
});

function postData() {
    const formData = new FormData();
    formData.append('id', $('#userModal span[name="id"]').text());
    formData.append("file", $("#userModal #uploadImage")[0].files[0]);
    $.ajax({
        url: '/api/v1/uploadAvatar',
        type: "post",
        data: formData,
        processData: false,
        contentType: false, 
        dataType: 'text',
        success: function (res) {         
            const data = JSON.parse(res);
            if (data.code == 200) {
                layer.msg(data.msg, {icon: 1});
                $('#editUser img').attr('src', data.data.url);
            }
        }
    });
}
</script>
 </body></html>